/* eslint-disable react/button-has-type */
import React, { useState } from 'react';
import 'cesium/Widgets/widgets.css';
import { CesiumWidget, CameraFlyTo } from 'resium';
import { Ion, Cartesian3 } from 'cesium';
import setting from './setting';


function Demo({ width, height }) {
  // eslint-disable-next-line max-len
  Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYzM1OTg0MS1mYTA2LTQzMDYtOWE0YS1lZmU4M2M4NjU0YzYiLCJpZCI6NjQ3NTgsImlhdCI6MTYyOTQ2OTkzMn0.AuEUKUHCBV-ztpRKbnWfBDF-fhidCvg1ykrc_xP3xcE';
  const [once, setOnce] = useState(true);

  return (
    <div style={{ width, height }}>
      <CesiumWidget full>
        <button
          style={{
            position: 'absolute', top: '0', left: '0', backgroundColor: 'green'
          }}
          onClick={() => setOnce(o => !o)}>
          Once:
          {once.toString()}
        </button>
        ;
        <CameraFlyTo
          duration={5}
          destination={Cartesian3.fromDegrees(-76.6, 41.04, 1000)}
          once={once} />
      </CesiumWidget>
    </div>

  );
}
Demo.setting = setting;
export default Demo;
